<template>
    <div class="footer">
    
        <div class="flex_item">
            <router-link to="/index">
                <p class="footer_icon">
                    <img src="../images/mainOne/finding/icon_shouye.png" />
                </p>
                <p class="footer_title">首页</p>
            </router-link>
        </div>
        <div class="flex_item active">
            <router-link to="/finding">
                <p class="footer_icon">
                    <img src="../images/mainTwo/clickthrough/12.png" />
                </p>
                <p class="footer_title">发现</p>
            </router-link>
        </div>
        <div class="flex_item">
            <router-link to="/sort">
                <p class="footer_icon">
                    <img src="../images/mainOne/finding/icon_fenlei.png" />
                </p>
                <p class="footer_title">分类</p>
            </router-link>
        </div>
        <div class="flex_item">
            <router-link to="/mine">
                <p class="footer_icon">
                    <img src="../images/mainOne/finding/icon_wode.png" />
                </p>
                <p class="footer_title">我的</p>
            </router-link>
        </div>
    
    </div>
</template>
<script>
export default {
    name: 'foot',
    data() {
        return {

        }
    },

}
</script>
<style scoped lang="less">
.footer {
    background: #fff;
    position: fixed;
    display: flex;
    bottom: 0;
    font-size: 22/75rem;
    height: 100/75rem;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    box-shadow: 0px 5px 20px #000;
    .flex_item {
        a {
            color: #808080;
            flex-flow: 1;
            .footer_icon {
                img {
                    width: 46/75rem;
                    height: 46/75rem;
                    margin-top: 20/75rem;
                }
            }
        }
        .router-link-exact-active {
                color: #ff406f;
            }
    }
}
</style>
